<template>
  <div class="edit-container">
    <el-form v-loading="formLoading" ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="是否可填报：" prop="isFill">
        <el-switch
          v-model="form.isFill"
          :active-value="2"
          :inactive-value="1"
        >
        </el-switch>
      </el-form-item>
      <el-form-item label="账号：" prop="content" v-if="form.isFill === 2">
        <el-input v-model="form.content" placeholder="账号" maxlength="12" class="col"></el-input>
      </el-form-item>
      <el-form-item label="密码：" prop="password" v-if="form.isFill === 2">
        <el-input v-model="form.password" placeholder="密码" maxlength="12" class="col"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button v-loading="saveLoading" element-loading-background="rgba(0, 0, 0, 0.3)" type="primary"
                   @click="updateRowState">保存
        </el-button>
        <el-button @click="close">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {editFillApi} from "@/api/companyCode";

export default {
  components: {},
  props: {
    id: {
      default: null
    },
    isFill: {
      default: null
    }
  },
  data() {
    return {
      form: {
        id: null,
        isFill: '',
        content: '',
        password: '',
      },
      rules: {
        isFill: [{required: true, message: '请选择', trigger: ['blur']}],
        content: [{required: true, message: '请填写', trigger: ['blur']}],
        password: [{required: true, message: '请填写', trigger: ['blur']}],
      },
      roles: [],
      saveLoading: false,
      formLoading: false,
    }
  },
  mounted() {
    if (this.isFill) {
      this.form.isFill = this.isFill
    }
  },
  methods: {
    updateRowState() {
      this.form.id = this.id
      editFillApi(this.form).then(() => {
        this.$message.success('修改成功')
        this.close();
      }).finally(() => {
        this.getTableList()
      })
    },
    close() {
      this.$emit('hideEditDialog')
    }
  }
}
</script>
